<template>
    <div>
        <el-card class="box-card" shadow="never">
            <!--导航栏-->
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" class="edit-el-form" label-position="right" size="small" :model="form" :rules="rules" label-width="auto">
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="所属社区" prop="c_id">
                        <el-select v-model="form.c_id" @change="handleComChange" placeholder="请选择社区">
                            <el-option
                                    v-for="item in basic_data"
                                    :key="item.c_id"
                                    :label="item.c_name"
                                    :value="item.c_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="所属网格" prop="g_id">
                        <el-select v-model="form.g_id" placeholder="请选择网格">
                            <el-option
                                    v-for="item in allgridlist"
                                    :key="item.g_id"
                                    :label="item.g_name"
                                    :value="item.g_id">
                            </el-option>
                         </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                    <el-form-item label="单位名称" prop="c_name">
                        <el-input v-model="form.c_name" required></el-input>
                    </el-form-item>
                </el-row>
                <el-row :gutter='12'>
                    <el-col :span='11'>
                      <el-form-item label="特殊行业" prop="is_special">
                              <el-radio v-model="form.is_special" label="0">否</el-radio>
                              <el-radio v-model="form.is_special" label="1">是</el-radio>
                      </el-form-item>
                    </el-col>
                    <el-col :span='11'>
                      <el-form-item label="单位类型" prop="type">
                         <el-select v-model="form.type" placeholder="请选择" required>
                             <el-option
                                     v-for="item in allcompanytype"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value">
                             </el-option>
                         </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="员工人数" prop="worker_num">
                        <el-input v-model="form.worker_num" required>
                          <template slot="append">位</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="占地面积" prop="cover_area">
                        <el-input v-model="form.cover_area">
                          <template slot="append">㎡</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="法人代表" prop="legal_person">
                        <el-input v-model="form.legal_person"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="法人电话" prop="legal_person_phone">
                        <el-input v-model="form.legal_person_phone"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="党支部书记" prop="party_clerk">
                        <el-input v-model="form.party_clerk">
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="党支部书记电话" prop="party_clerk_phone">
                        <el-input v-model="form.party_clerk_phone">
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                      <el-form-item label="工会主席" prop="labour_union_master">
                          <el-input v-model="form.labour_union_master"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                      <el-form-item label="工会主席电话" prop="labour_union_master_phone">
                          <el-input v-model="form.labour_union_master_phone">
                          </el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="工会会员人数" prop="labour_vip_num">
                        <el-input v-model="form.labour_vip_num">
                          <template slot="append">人</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="党员人数" prop="party_num">
                        <el-input v-model="form.party_num">
                          <template slot="append">人</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="安全负责人" prop="safe_master">
                        <el-input v-model="form.safe_master"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="安全负责人电话" prop="safe_master_phone">
                        <el-input v-model="form.safe_master_phone"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="单位文明情况" prop="culture_remark">
                        <el-input v-model="form.culture_remark"  type="textarea"  :rows="2"></el-input>
                    </el-form-item>
                </el-row>
                <el-row :gutter='12'>
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark"  type="textarea"  :rows="3"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                  <VMap :amap_center="amap_center" :amap_markers="amap_markers" :catch_map="catch_map" :remove_markers="remove_markers"></VMap>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="X坐标" prop="x_coordinate">
                        <el-input v-model="form.x_coordinate"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="Y坐标" prop="y_coordinate">
                        <el-input v-model="form.y_coordinate"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--查看不展示按钮-->
                <el-form-item v-if="edit_type!=0">
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import { getCompanyInfo,editCompany } from '@/api/company.js';
    import { getOrganInfo } from '@/api/organ.js';
    import { getBasicData } from '@/api/basicdata.js';
    import VMap from '@/components/VMap.vue';
    export default {
        name:'CompanyEdit',
        components:{ VMap },
        data() {
            let validateNumber=(rule,value,callback)=>{
               if(value==''){
                  callback();
               }
               let float_reg=/^([0-9]{1,}[.][0-9]*)$/;   //校验小数
               let int_reg=/^([0-9]{1,})$/;     //校验整数
               let number_arr={
                  cover_area:'占地面积'
               };
               let rule_name=number_arr[rule.field];
               if(!int_reg.test(value) && !float_reg.test(value)){
                  callback(new Error(rule_name+'必须为数字'));
               }else{
                  callback();
               }
            }
            let validateInt=(rule,value,callback)=>{
               if(value==''){
                  callback();
               }
               let int_reg=/^([0-9]{1,})$/;
               let int_arr={
                  party_num:'党员人数',
                  labour_vip_num:'工会会员人数',
               };
               let rule_name=int_arr[rule.field];
               if(!int_reg.test(value)){
                  callback(new Error(rule_name+'必须为数字'));
               }else{
                  callback();
               }
            }
            return {
                form: {
                    c_id:'',
                    g_id:'',
                    c_name: '',
                    is_special:'0',
                    type:'',
                    worker_num:'',
                    cover_area:'',
                    legal_person:'',
                    legal_person_phone:'',
                    party_clerk:'',
                    party_clerk_phone:'',
                    labour_union_master:'',
                    labour_union_master_phone:'',
                    labour_vip_num:'',
                    party_num:'',
                    safe_master:'',
                    safe_master_phone:'',
                    culture_remark:'',
                    address:'',
                    remark:'',
                    pic:'',
                    x_coordinate:'',
                    y_coordinate:'',
                },
                //校验规则
                rules:{
                    c_name: [
                        { required:true , message:'请输入单位名称',trigger:'blur' }
                    ],
                    c_id:[
                        { required:true , message:'请选择所属社区'}
                    ],
                    g_id:[
                        { required:true , message:'请选择所属网格'}
                    ],
                    type:[
                        { required:true , message:'请选择单位类型'}
                    ],
                    worker_num:[
                        { required:true , message:'请输入员工人数'}
                    ],
                    cover_area:[
                        { required:false , validator:validateNumber}
                    ],
                    legal_person:[
                        { required:true , message:'请输入法人代表'}
                    ],
                    legal_person_phone:[
                        { required:true , message:'请输入法人联系电话'}
                    ],
                    party_num:[
                        { required:false, validator:validateInt }
                    ],
                    labour_vip_num:[
                        { required:false, validator:validateInt }
                    ],
                    x_coordinate:[
                        { required:true , message:'请选择医院坐标'}
                    ],
                    y_coordinate:[
                        { required:true , message:'请选择医院坐标'}
                    ]
                },
                //加载组件
                loading: false,
                button_name:'立即提交',
                content:'单位添加',
                allcompanytype:this.$store.state.allcompanytype,
                allgridlist:[],
                //地图中心点
                amap_center:[121.5273285,31.21515044],
                //地图组件标点
                amap_markers:[],
                basic_data:[]
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                this.loading=true;
                                this.button_name='正在提交';
                                var send_data={
                                    api_token:this.$store.getters.getSessionId,
                                };
                                //写入表单内容
                                for(let item in this.form){
                                    send_data[item]=this.form[item];
                                }
                                if(this.id!=-1){
                                    send_data.id=this.id;
                                }
                                editCompany(send_data).then(function(response){
                                     let code=response.data.code;
                                     let type=code==1?'success':'error';
                                     let msg=code==1?'成功':'失败';
                                     that.$message({
                                         message:that.content+msg,
                                         duration:1200,
                                         type:type,
                                         onClose:function(e){
                                             that.loading=false;
                                             if(code==1){
                                                that.$router.push('/basicdata/companylist');
                                             }else{
                                                that.button_name='立即提交';
                                             }
                                         }
                                    })
                                })
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input,button').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                this.$router.push({
                   name:'companylist',
                   query:{
                     g_id:this.$store.getters.getCurrentGId
                   }
                });
            },
            handleComChange(c_id){
                this.form.g_id='';
                this.getGridList(c_id);
            },
            getGridList(c_id){
              for(let i=0;i<this.basic_data.length;i++){
                  if(c_id==this.basic_data[i]['c_id']){
                    this.allgridlist=this.basic_data[i]['children'];
                    break;
                  }
              }
            },
            //获取地图坐标,并且标点
            catch_map(x,y){
               this.amap_markers.push([x, y]);
               this.form.x_coordinate=x;
               this.form.y_coordinate=y;
            },
            //移除标点
            remove_markers(){
               this.amap_markers=[];
            },
            getCompanyInfo(){
               if(this.id!=-1){
                  let send_data={
                      api_token:this.$store.getters.getSessionId,
                      id:this.id
                  }
                  let that=this;
                  getCompanyInfo(send_data).then(function(response){
                      if(response.data.code==1){
                        let val=response.data.info;
                        let select_arr={
                            type:1,
                        };
                        let number_arr={
                            party_num:1,
                            labour_vip_num:1,
                            worker_num:1,
                            cover_area:1
                        };
                        let radio_arr={
                            is_special:1
                        };
                        //下拉框
                        if(val.c_id>0){
                          that.getGridList(val.c_id);
                        }
                        //地图
                        if(val.x_coordinate!='' && val.y_coordinate!=''){
                          that.amap_markers.push([val.x_coordinate, val.y_coordinate]);
                        }
                        for(let item in that.form){
                          if(select_arr[item]==1){
                            that.form[item]=val[item]==0?'':val[item].toString();
                          }else if(number_arr[item]==1){
                            that.form[item]=val[item]==0?'':val[item];
                          }else if(radio_arr[item]==1){
                            that.form[item]=val[item].toString();
                          }else{
                            that.form[item]=val[item];
                          }
                        }
                      }
                  })
               }
            }
        },
        created(){
            if(this.edit_type==1){
                this.content='单位添加';
            }else if(this.edit_type==0){
                this.content='单位详情';
            }else if(this.edit_type==2){
                this.content='单位编辑';
            }
            let info_data={
               api_token:this.$store.getters.getSessionId,
               fields:'x_coordinate,y_coordinate'
            };
            let that=this;
            getOrganInfo(info_data).then(function(response){
               let val=response.data.info;
               if(val.x_coordinate!='' && val.y_coordinate!=''){
                  that.amap_center=[val.x_coordinate,val.y_coordinate];
               }
            })
            //先查询社区网格下拉框
            let send_data={
               api_token:that.$store.getters.getSessionId
            };
            getBasicData(send_data).then(function(response){
               that.basic_data=response.data.list;
               that.getCompanyInfo();
            })
        },
        computed:{
            id(){
                return this.$route.params.id;
            },
            edit_type(){
                return this.$route.params.edit_type;
            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
    .el-select{
       width:100%;
    }
</style>
